<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../static/bootstarp/img/favicon.ico" th:href="@{/bootstarp/img/favicon.ico}"/>

    <title>Checkout example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../static/bootstarp/css/bootstrap.min.css" rel="stylesheet"
          th:href="@{/bootstarp/css/bootstrap.min.css}"/>

    <!-- Custom styles for this template -->
    <link href="../../static/bootstarp/custom/userpage.css" rel="stylesheet">
</head>

<body class="bg-light">

<div class="container">
    <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt=""
             width="72" height="72">
        <h2>个人主页</h2>
        <p class="lead">
            Below is an example form built entirely with Bootstrap's form controls. Each required form group has a
            validation state that can be triggered by attempting to submit the form without completing it.
        </p>
    </div>

    <div class="row">
        <div class="col-md-4 order-md-2 mb-4">

            <h4 class="d-flex justify-content-between align-items-center mb-3">
                <span class="text-muted">考试场次</span>
                <span class="badge badge-secondary badge-pill">Go</span>
            </h4>

            <ul th:each="userRecord : ${userList}" class="list-group mb-3">
                <li class="list-group-item d-flex justify-content-between lh-condensed">
                    <div>
                        <h6 th:text="${userRecord.title}" class="my-0">考试名称</h6>
                        <small th:text="${userRecord.desction}" class="text-muted">考试场次</small>
                        <small class="text-muted">考试时间 : 30分钟</small>
                    </div>
                    <span th:text="'得分: '+${userRecord.total}" class="text-muted">分数</span>
                </li>
            </ul>
        </div>

        <div class="col-md-8 order-md-1">
            <h4 class="mb-3">个人信息</h4>
            <form action="" class="needs-validation" novalidate>
                <div class="mb-3">
                    <label for="username">账号</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                        </div>
                        <input name="account" th:value="${session.user.account}" type="text" class="form-control"
                               id="username"
                               placeholder="" readonly>
                        <div class="invalid-feedback" style="width: 100%;">
                            Your username is required.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="passwd">密码</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                        </div>
                        <input name="passwd" th:value="${session.user.passwd}" type="text" class="form-control"
                               id="passwd" readonly>
                        <div class="invalid-feedback" style="width: 100%;">
                            Your passwd is required.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="role">权限</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                        </div>
                        <input name="role" th:value="${session.user.userRole}" type="text" class="form-control"
                               id="role"
                               placeholder="" readonly>
                        <div class="invalid-feedback" style="width: 100%;">
                            Your role is required.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="address2">创建时间<span class="text-muted">(Optional)</span></label>
                    <input type="text" th:value="${session.user.createTime}" class="form-control" id="address2"
                           readonly>
                </div>

                <!--<hr class="mb-4">-->
                <!--<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to Sign Out</button>-->
            </form>
        </div>
    </div>

    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2017-2018 Company Name</p>
        <ul class="list-inline">
            <li class="list-inline-item"><a href="#">Privacy</a></li>
            <li class="list-inline-item"><a href="#">Terms</a></li>
            <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
    </footer>
</div>

<script th:src="@{/bootstarp/js/jquery-slim.min.js}" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../static/bootstarp/js/jquery-slim.min.js"><\/script>')</script>
<script th:src="@{/bootstarp/js/popper.min.js}" src="../../static/bootstarp/js/popper.min.js"></script>
<script th:src="@{/bootstarp/js/bootstrap.js}" src="../../static/bootstarp/js/bootstrap.min.js"></script>
<script th:src="@{/bootstarp/js/holder.min.js}" src="../../static/bootstarp/js/holder.min.js"></script>
<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
        'use strict';

        window.addEventListener('load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');

            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
</body>
</html>
